<template>
  <div class="wrap" ref="containerDom">
    <el-card class="card-wrap">
      <el-scrollbar :height="scrollHeight">
        <el-table :data="goodsData" border style="width: 100%">
          <el-table-column type="index" label="序号" width="60" />
          <el-table-column prop="pid" label="产品ID" width="240">
          </el-table-column>
          <el-table-column prop="name" label="产品名称" width="100">
          </el-table-column>
          <el-table-column prop="image" width="120px" label="预览图">
            <template #default="scope">
              <img
                style="width: 80px; height: 80px"
                :src="scope.row.image"
                alt=""
              />
            </template>
          </el-table-column>
          <el-table-column prop="price" label="产品单价" width="100">
          </el-table-column>
          <el-table-column prop="count" label="产品数量" width="100">
          </el-table-column>
          <el-table-column prop="createAt" label="创建时间" width="150">
          </el-table-column>
          <el-table-column prop="updateAt" label="更新时间" width="150">
          </el-table-column>
          <el-table-column label="操作">
            <template #default="scope">
              <div class="btn-group">
                <el-button @click="updateGood(scope)">修改</el-button>
                <el-button>删除</el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </el-scrollbar>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { getGoodList } from "@/api/good";
import utils from "@/utils";
const containerDom = ref();
const scrollHeight = ref("0px");
onMounted(() => {
  scrollHeight.value = `${containerDom.value.offsetHeight - 100}px`;
});
const goodsData = ref([]);
const getGoods = async () => {
  const res = await getGoodList({ limit: 10, page: 1 });
  if (res.data) {
    const data = res.data.map((item: any) => {
      return {
        pid: item.pid,
        name: item.name,
        image: utils.getImageUrl(item.pid),
        createAt: item.createAt,
        updateAt: item.updateAt,
        description: item.description,
        categories: item.categories,
        price: item.price,
        count: item.count,
      };
    });
    goodsData.value = data;
  }
};
getGoods();

const updateGood = (good: any) => {
  console.log(good);
};
</script>

<style scoped lang='scss'>
.wrap {
  height: 100%;
  .card-wrap {
    height: 100%;
  }
  .btn-group {
    display: flex;
    justify-content: space-around;
    align-items: center;
  }
}
</style>
